/* 通用选择器，一般不建议使用 */
/* *{
    margin: 0;
    padding: 0;
} */

/* id选择器 */
#main {
    color: red;
    ;
}

/* 类选择器 */
.news_title {
    color: brown;
}

/* 元素选择器 */
h3 {
    color: coral;
}

/* 属性选择器 */
[title] {
    font-size: 1.5em;
}

p[data-bind] {
    color: blue;
}

p[title="abc"] {
    color: chocolate;
}

p[title~="de"] {
    color: orange;
}

p[title|="xyz"] {
    color: fuchsia;
}

a[href][title] {
    color: green;
    font-size: .75em;
}

/* 伪类与伪元素选择器 */
p:hover {
    background-color: green;
}

li:hover {
    background-color: blue;
}

/* 链接未访问的状态 */
a:link {
    color: blue;
}

/* 链接已访问的状态 */
a:visited {
    color: red;
}

/* 鼠标移上去 */
a:hover {
    font-weight: bold;
}

/* 鼠标点击后 */
a:active {
    color: pink;
}
/* 激活后有一个背景颜色 */
input:focus{
    background-color: #abc;
}
/* 针对父容器当中的第一个元素 */
pre:first-child{
    color: red;
}
li:first-child{
    color:red;
}

/* 伪元素 */
/* 第一行 */
div p::first-line{
    color: red;
}
/* 首字母*/
div p::first-letter{
    /* 加粗 */
    font-weight: blod;
    font-size: 200%;
}

div h1::before{
    /* 在伪元素中插入内容 */
    content:"before:";
}

div h1::after{
    content:":after";
}

/* 组合选择器 */

div span{
    color: rgb(41, 41, 207);
}
/* 子元素选择器：之间的元素子元素变化，间接的不变化 */
p > span{
    color: pink;
}
pre + span{
    color: blue;
}

pre ~ span.bro{
    color: red;
}

